/**
 * Created by HuQiang on 2017/8/3.
 */
import React from 'react';
import {Radio, Input} from 'antd'
import $ from "jquery";
const RadioGroup = Radio.Group;
const {TextArea} = Input;

let question = [];
let answer = [];
let option = [];
let analysis = [];
let user_answer = [];

let dataList = [];
export default class Question extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            exam_id: this.props.params.exam_id,
            radio_disabled: true
        };
    }


    componentWillMount() {
        question.length = 0;
        answer.length = 0;
        option.length = 0;
        user_answer.length = 0;
        analysis.length = 0;
        dataList.length = 0;
        this.fetchData();
    };

    fetchData = () => {
        $.ajax({
                type: "POST",
                url: "http://123.207.214.129:9090/LanOu/getExamHistoryDetail",
                data: {
                    exam_id: this.state.exam_id
                },
                async: false,
                dataType: "json",
                success: (data) => {
                    for (let i = 0; i < data.data.length; i++) {
                        switch (data.data[i].question_type_id) {
                            case 1:
                                question.push(data.data[i].content);
                                answer.push(data.data[i].answer);
                                analysis.push(data.data[i].analysis);
                                option.push({
                                    "A": data.data[i].option[0],
                                    "B": data.data[i].option[1],
                                    "C": data.data[i].option[2],
                                    "D": data.data[i].option[3]
                                });
                                user_answer.push(data.data[i].user_answer);
                                dataList.push(
                                    <div key={i} className="question-type-1 question-type">

                                        <p className="question-title">{i + 1}.{question[i]}</p>
                                        <div className="options">
                                            <RadioGroup value={user_answer[i]}>
                                                <Radio style={radioStyle} disabled={this.state.radio_disabled}
                                                       value={option[i].A.toString().charAt(0)}>{option[i].A}</Radio>
                                                <Radio style={radioStyle} disabled={this.state.radio_disabled}
                                                       value={option[i].B.toString().charAt(0)}>{option[i].B}</Radio>
                                                <Radio style={radioStyle} disabled={this.state.radio_disabled}
                                                       value={option[i].C.toString().charAt(0)}>{option[i].C}</Radio>
                                                <Radio style={radioStyle} disabled={this.state.radio_disabled}
                                                       value={option[i].D.toString().charAt(0)}>{option[i].D}</Radio>
                                            </RadioGroup>
                                        </div>

                                        <div style={{display: "block"}}>
                                            {"正确答案: " + answer[i] + ", 解析: " + analysis[i]}
                                        </div>
                                    </div>);
                                break;
                            case 2:
                                question.push(data.data[i].content);
                                answer.push(data.data[i].answer);
                                analysis.push(data.data[i].analysis);
                                option.push({
                                    "Yes": "是",
                                    "No": "否"
                                });
                                user_answer.push(data.data[i].user_answer);
                                dataList.push(
                                    <div key={i} className="question-type-2 question-type">
                                        <p className="question-title">{i + 1}.{question[i]}</p>
                                        <div className="options">
                                            <RadioGroup value={user_answer[i]}>
                                                <Radio style={radioStyle} disabled={this.state.radio_disabled}
                                                       value={option[i].Yes}>{option[i].Yes}</Radio>
                                                <Radio style={radioStyle} disabled={this.state.radio_disabled}
                                                       value={option[i].No}>{option[i].No}</Radio>
                                            </RadioGroup>
                                        </div>
                                        <div style={{display: "block"}}>
                                            {"正确答案: " + answer[i] + ", 解析: " + analysis[i]}
                                        </div>
                                    </div>
                                );
                                break;
                            case 3:
                                question.push(data.data[i].content);
                                analysis.push(data.data[i].analysis);
                                answer.push(data.data[i].answer);
                                user_answer.push(data.data[i].user_answer);
                                dataList.push(
                                    <div key={i} className="question-type-3 question-type">
                                        <p className="question-title">{i + 1}.{question[i]}</p>
                                        <TextArea rows={4} defaultValue={user_answer[i]}
                                                  disabled={this.state.radio_disabled}/>
                                        <div style={{display: "block"}}>
                                            {"参考答案: " + answer[i] + ", 解析: " + analysis[i]}
                                        </div>
                                    </div>
                                );
                                break;
                            default:
                                break;
                        }
                    }
                    console.log(data);
                },
                error: function (e) {
                    console.log(e);
                }
            }
        )
        ;
    };

    render() {
        return (
            <div>
                <div>
                    {dataList}
                </div>
            </div>
        );
    }
    ;
}
const radioStyle = {
    display: 'block',
    height: '30px',
    lineHeight: '30px',
};